import React, {useEffect, useState} from 'react'
import TabBar from '@c/TabBar'
import './assets/style.scss'
import { Stepper } from 'antd-mobile'
import {useDispatch, useSelector} from 'umi'
import {ReadShoppingCart} from '@a/index'
export default function index() {
const dispatch = useDispatch()
//通过useSelector方法获取dva中的公共状态（购物车的信息）
const {items, number, total} = useSelector((state: { count: any }) => state.count)
console.log(items);
console.log(total);
//通过useSelector方法获取dva中的公共状态（购物车的信息）

//初始化调用dva中的异步请求
useEffect(() => {
  dispatch({
    type: 'count/ReadShoppingCarted'
  })
}, [])
//初始化调用dva中的异步请求
  return (
    <div className='cart_shopping'>
      {/* 头部的购买数量和管理 */}
      <div className="cart_header">
        <div>
          <span>购买数量:{number}</span>
        </div>
        <div>
          <span>管理</span>
        </div>
      </div>
      {/* 头部的购买数量和管理 */}

      {/*商品列表渲染  */}
      <div className="cart_content">
{
  items.map((el: { goodsId: React.Key | null | undefined; pic: string | undefined; name: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; price: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; number: number | undefined }) => (
    <div className="cart_item" key={el.goodsId}>
    <img src={el.pic} alt="" />
    <div className='item_nav'>
      <p>{el.name}</p>

      <div className="cart_stepper">
      <span>￥{el.price}</span>
      
      <Stepper
      defaultValue={el.number}
      // disabled = {}
      onChange={value => {
        console.log(value)
      }}
    />
      </div>
     
    </div>
  </div>
  ))
}
        
    
      </div>
       {/*商品列表渲染  */}
      <TabBar/>
      </div>
  )
}
